{% extends 'lay_out/basic.html' %}
{% block title %}用户注册{% endblock %}

{% block css %}
<style>
    .account{
        width: 400px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #f0f0f0;
        padding: 10px 30px 30px 30px;
        -webkit-box-shadow: 5px 10px 10px rgba(0,0,0,.05);
        box-shadow: 5px 10px 10px rgba(0,0,0,.05);
    }
    .account .title {
        font-size :25px;
        font-weight: bold;
        text-align: center;
    }
    .account .form-group{
        margin-bottom: 20px;
    }
    .error-msg{
        color: red;
        position: absolute; /*错误定位*/
    }
</style>

{% endblock %}

{% block content %}

<div class="account">
    <div class="title">用户注册</div>
    <form id="regForm" method="POST" novalidate>
    {% csrf_token %}
    {% for field in form %}
        {% if field.name == 'code' %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                <div class="clearfix">
                            <div class="col-md-6" style="padding-left: 0;">{{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                            <div class="col-md-5"><input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码"></div>
                </div>
            </div>
        {% else %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
            <span class="error-msg">{{ field.errors.0 }}</span>
        </div>
            {% endif %}
        {% endfor %}
    <div class="row">
        <div class="col-xs-3">
            <input id="btnSubmit" type="button" class="btn btn-primary" value="注 册"/>
        </div>
    </div>

    </form>

</div>
{% endblock %}

{% block js %}
    <script>

    //页面加载完毕后自动执行
    $(function () {
       /*  点击获取验证码按钮绑定事件*/

            bindClickBtnSms();
            bindClickSubmit();

    });

            function bindClickBtnSms(){
            $('#btnSms').click(function () {
                //获取用户输入的手机号
                var mobilePhone = $('#id_mobile_phone').val();

                //发送Ajax请求，将手机号发送至后台
                $.ajax({
                    url:'{% url "send_sms" %}',//反向获取Url
                    type:'GET',
                    dataType:"JSON",   //将服务端返回的数据序列化为字典
                    data:{mobile_phone:mobilePhone,tpl:'register'},
                    success:function (res) {
                        //ajax请求成功后，自动执行的函数
                        if(res.status){
                            sendSmsRemind();


                        }else{
                            //错误信息
                            console.log(res);
                            $.each(res.error,function (key,value) {
                                $('#id_' + key).next().text(value[0]);//取得此id下的报错信息
                            })
                        }
                    }
                })
            })
                function sendSmsRemind() {
                    var $smsBtn = $('#btnSms');
                    $smsBtn.prop('disabled',true)  //禁用
                    var time = 60;
                    var remind = setInterval(function () {
                        $smsBtn.val(time + "秒后重新发送");
                        time = time - 1;
                        if (time < 1){
                            clearInterval(remind); //禁用
                            $smsBtn.val('点击获取验证码').prop('disabled',false);
                        }
                    },1000);
                }

        }

            function bindClickSubmit() {
                $('#btnSubmit').click(function () {
                    $('.error-msg').empty();  //清空错误信息
                    //收集表单数据
                     //该ID下所以键值获得 $('#regForm').serialize();
                    //将数据发送至后台
                    $.ajax({
                        url:'{% url "register" %}',
                        type: 'POST',
                        data:$('#regForm').serialize() ,
                        dataType: 'JSON',
                        success:function (res) {
                            if (res.status){
                                location.href = res.data;
                            }else{
                                console.log(res);
                                //错误显示
                                $.each(res.error,function (key,value) {
                                    $('#id_' + key).next().text(value[0]);
                                    //每一条信息错误展示在下方
                                })
                            }
                        }
                    })
                })
            }
    </script>

{% endblock %}